<template>
  <el-descriptions class="margin-top" title="" :column="2" border>
    <el-descriptions-item v-for="item in descriptionsList" :key="item.label" :label="item.label">
      <template v-if="item?.type === 'images'">
        <el-image
          style="width: 100px; height: 100px"
          :src="value.url"
          v-for="(value, index) in formData[item.fieldName] || []"
          :key="index"
          :preview-src-list="[value.url]"
        />
      </template>
      <template v-else>
        {{ formData[item.fieldName] }}
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>
<script setup lang="ts">
// 定义 emit，用于通知外部关闭事件
const emit = defineEmits(["update:modelValue", "loadData"]);
import { useDictStore } from "@/store";
const dictStore = useDictStore();
const decorationStyleOptions = dictStore.getDictionary("DecorationStyle");
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

const descriptionsList = ref([
  {
    label: "装修风格",
    fieldName: "decorationStyleText",
  },
  {
    label: "平面布局图",
    fieldName: "layoutPlanFile",
    type: "images",
  },
  {
    label: "施工图",
    fieldName: "constructionDrawingFile",
    type: "images",
  },
  {
    label: "水电图",
    fieldName: "plumbingElectricalDrawingFile",
    type: "images",
  },
  {
    label: "效果图",
    fieldName: "renderingsFile",
    type: "images",
  },
]);

const formData = computed(() => {
  const {
    renderingsFile,
    layoutPlanFile,
    constructionDrawingFile,
    plumbingElectricalDrawingFile,
    decorationStyle,
  } = props.data.houseDesignSchemeVO || {};
  const decorationStyleText = decorationStyleOptions.find(
    (item) => item.value === decorationStyle
  )?.label;
  return {
    ...props.data.houseDesignSchemeVO,
    decorationStyleText,
    plumbingElectricalDrawingFile: JSON.parse(plumbingElectricalDrawingFile || "[]"),
    constructionDrawingFile: JSON.parse(constructionDrawingFile || "[]"),
    renderingsFile: JSON.parse(renderingsFile || "[]"),
    layoutPlanFile: JSON.parse(layoutPlanFile || "[]"),
  };
});
</script>
<style style="scss" scoped>
::v-deep(.el-tabs__content) {
  min-height: 100px;
  display: flex;
  align-items: center;
}
</style>
